/*
  学习目标：生命周期-小结
  三大阶段
  1. 挂载阶段
    1. constructor:  
      类似: vue中的created
      场景: 早期声明state和ref，👎现在几乎不用
    2. render: 渲染dom
    3. componentDidMount :
      类似: vue中mounted
      场景: 1.发请求  2. 最先获取dom  3. 绑定事件等
  2. 更新阶段
    2.1 render
      作用: 重新渲染, 更新dom
    2.2 componentDidUpdate
      作用: 类似watch, 可以做缓存

    触发更新阶段的两种方式:
      1. props改变
      2. setState调用
    注意: 
      1. render和componentDidUpdate中, 都可以获取到更新后的值
      2. 不能调用setState , 会导致死循环

  3. 卸载阶段
    3.1 componentWillUnMount
    类似: vue中的beforeDestroy
    作用: 做清除, 如解绑事件 关闭定时器等
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    isShow: true,
  };

  render() {
    const { isShow } = this.state;
    return <div>{isShow && <Child></Child>}</div>;
  }
}

class Child extends React.Component {
  resizeFn = () => {
    console.log('窗口改变了  ----->  ');
  };

  componentDidMount() {
    window.addEventListener('resize', this.resizeFn);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeFn);
    console.log('我要被卸载了  ----->  ');
  }

  render() {
    return <div>Child</div>;
  }
}
